

<template>
  <view class="mask" v-if="show" @click="hideen">
    <view class="container" :style="direction === 'y'?yStyle:xStyle" @tap.stop>
        <slot></slot>
    </view>
  </view>
  </template>
  
  
  
  <script>
    
  export default {
      name:'jPopup',
  
      props:{
          show:{
              type:Boolean,
              default: false
          },
          direction:{
              type:String,
              default: 'y'
          }
  
      },
      data(){
          return {
            yStyle:{
                width: '750rpx',
                animation: 'showPop 0.2s linear'
            },
            xStyle:{
                width: '360rpx',
                height:'100%',
                right: 0,
            }
  
          }
      },
      methods:{
          hideen(){
            this.$emit('update:show',false)
          }
      }
  }
  
  </script>
  <style scoped lang="scss">
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,.5);
    .container{
      background: white;
      border-radius: 30rpx 30rpx 0rpx 0rpx;
      position: absolute;
      bottom: 0;
    }
  }
  @keyframes showPop {
    0%{
      transform: translate(0,100%);
    }
    100%{
      transform: translate(0,0);
    }
  }
  </style>